<template>
    <div class="conbox" id="conbox">
		<div class="head">订单状态：{{orderstatus}}</div>
		<div class="order_address">
			<p>
				<span class="addres_left">收货人：{{goodsdetail.consignee}}</span>
				<span class="address_right">{{goodsdetail.mobile}}</span>
			</p>
			<p class="get_address">收货地址：{{goodsdetail.address}}</p>
		</div>
		<div class="line_lab"></div>
		<ul class="orderbody">
			<p class="order_title">订单详情</p>
			<li v-for="(item,index) in goodsdetail.goods" :key="index" v-if="shows==1?index<=1:true">
				<div class="goods_left">
					<img :src="item.goods_thumb" alt=""></div>
				<div class="goods_modile">
					<p>
						<span class="goods_name">{{item.goods_name}}</span>
						<span class="goods_price" v-if="false">{{item.goods_price_formated}}</span>
					</p>
					<p class="goods_num">
						<span class="goods_name goods_type">{{item.goods_sn}}</span>
						<span class="goods_price goods_type" v-if="false">X{{item.goods_number}}</span>
					</p>
				</div>
			</li>
			<a class="show_all" @click="showmore(1)" v-if="showstatus&&listlength>
                2">展开所有({{listlength-2}})
				<img :src="constant.imgUrl +'design/down.png'" alt="">
			</a>
			<a class="show_all"  v-if="!showstatus&&listlength>
                2" @click="showmore(2)">收起({{listlength}})
				<img :src="constant.imgUrl +'design/up.png'" alt="">
			</a>
			<div class="delivery"  v-if="goodsdetail.shipping_id && !goodsdetail.offline_store">
				<span class="delivery_title">配送方式</span>
				<span class="delivery_way">{{ goodsdetail.shipping_name }}{{ goodsdetail.shipping_fee_formated }}</span>
			</div>
			<div class="order_count">
				<div class="order_total">
					<p>
						<span>商品总额</span>
						<span>￥{{goodsdetail.goods_amount}}</span>
					</p>
					<!-- <p>
                        <span>已优惠</span>
                        <span v-if="goodsdetail.order_amount-ordermount>=0">￥{{goodsdetail.order_amount-ordermount}}</span>
                        <span v-if="goodsdetail.order_amount-ordermount<0">-￥{{goodsdetail.order_amount-ordermount}}</span>
                    </p>-->
					<p v-if="goodsdetail.tax*1 >0">
						<span>发票税额</span>
						<span>{{goodsdetail.tax}}</span>
					</p>
					<p v-if="goodsdetail.shipping_fee *1 >0">
						<span>配送费用</span>
						<span>{{goodsdetail.shipping_fee }}</span>
					</p>
					<p v-if="goodsdetail.pay_fee *1 >0">
						<span>支付费用</span>
						<span>{{goodsdetail.pay_fee }}</span>
					</p>
					<p v-if="goodsdetail.discount *1 >0">
						<span>折扣</span>
						<span>-{{goodsdetail.discount }}</span>
					</p>
					<p v-if="goodsdetail.surplus *1 >0">
						<span>使用余额</span>
						<span>-{{goodsdetail.surplus }}</span>
					</p>
					<p v-if="goodsdetail.integral_money *1 >0">
						<span>使用积分</span>
						<span>-{{goodsdetail.integral_money }}</span>
					</p>
					<p v-if="goodsdetail.bonus *1 >0">
						<span>使用红包</span>
						<span>-{{goodsdetail.bonus }}</span>
					</p>
					<p v-if="goodsdetail.coupons *1 >0">
						<span>使用优惠券</span>
						<span>-{{goodsdetail.coupons }}</span>
					</p>
					<p v-if="goodsdetail.card_amount *1 >0">
						<span>使用储值卡</span>
						<span>-{{goodsdetail.card_amount }}</span>
					</p>
					<p v-if="goodsdetail.money_paid *1 >0">
						<span>已付款金额</span>
						<span>-{{goodsdetail.money_paid }}</span>
					</p>
					<p class="paymoney">
						<span>应付支付</span>
						<span>￥{{goodsdetail.order_amount}}</span>
					</p>
				</div>
			</div>
		</ul>
		<div class="tip" style="max-width:750px;min-width:320px;">
			<div class="txt"><span class="icon iconfont icontishi"></span>温馨提示：手机端暂不支持订单处理</div>
			<button type="default" @click="showPopup">详情</button>
		</div>
		<uniPopup width="77%" height="415px" ref="mask">
			<div class="pop_tip">
				<h3>温馨提醒</h3>
				<div class="txt">
					【订单处理】目前还不支持手机噢
					<br/>
					为了更好的用户体验，您可以登录电脑进行上传，http://mall.meijiabang.com/seller 您登录的账号：{{userInfo.mobile_phone}}（短信验证登录）
				</div>
				<div class="btn">
					<view class="yes child"  @click="copy('http://mall.meijiabang.com/seller')">复制网址</view>
					<view class="no child" @click="closePop">再看看</view>
				</div>
			</div>
		</uniPopup>
    </div>
</template>

<script>
import { getgoods } from '@/api/materical'
import { mapGetters, mapState, mapActions } from 'vuex'
import uniPopup from '@/components/uni-popup/uni-popup.vue'
export default {
	name: 'orderDetail',
	components: {
		uniPopup
	},
	data() {
		return {
			constant: this.$constant,
			goodsdetail: '暂无订单状态',
			shows: 1,
			showstatus: true,
			listlength: '',
			ordermount: '',
			orderstatus: '',
			show: false, // 弹出框
			user_id: '',
			order_id: ''
		}
	},
	computed: {
		...mapGetters({ userInfo: 'getUser' })
	},
	onLoad(opcation) {
		this.user_id = opcation.user_id
		this.order_id = opcation.order_id
		this.loadingType = 0
		this.getorderdetail()
		uni.showLoading({
			title: '数据加载中'
		})
	},
	mounted() {
		// this.getorderdetail()
	},
	methods: {
		getorderdetail() {
			let data = {
				user_id: this.user_id,
				order_id: this.order_id
			}
			getgoods(data).then(res => {
				if (res.status == 'success') {
					let list = res.data
					this.goodsdetail = list
					this.orderstatus = list.order_status
					this.listlength = list.goods.length
					this.ordermount = list.goods_amount * 1 + list.shipping_fee * 1 + list.pay_fee * 1 + list.tax * 1
					uni.hideLoading()
				} else {
					this.msg(res.errors.message)
					uni.hideLoading()
				}
			})
		},
		showmore(type) {
			if (type == 1) {
				this.shows = this.listlength
			} else {
				this.shows = 1
			}
			this.showstatus = !this.showstatus
		},
		msg(msg) {
			uni.showToast({
				title: msg,
				icon: 'none'
			})
		},
		showPopup() {
			this.$refs.mask.open()
		},
		closePop() {
			this.$refs.mask.close()
		},
		copy(url) {
			let that = this
			uni.setClipboardData({
				data: url,
				success: function(res) {
					uni.getClipboardData({
						success: function(res) {
							that.msg('复制成功')
							that.$refs.mask.close()
						},
						fail: function(res) {
							that.msg('复制失败')
							that.$refs.mask.close()
						}
					})
				}
			})
		}
	}
}
</script>

<style scoped lang="scss">
	.conbox{
		/*background: white;*/
	}
	.head{
		height: 100px;
		width: 100%;
		font-size: 32px;
		color: white;
		text-indent: 30px;
		line-height: 100px;
		background: #FF9000;
	}
	.order_address{
		height: 188px;
		width: 100%;
		font-size: 28px;
		background: url($imgUrl+'material/icon_zhuangshi.png');
		background-size: 100% 20px;
		background-position: 0 100%;
		background-repeat:repeat-x;
	}
	.order_address p{
		/* padding: 25px 20px;*/
		color: #666666;
		width: 94%;
		float: left;
		margin-left: 25px;
		margin-top: 15px;
	}
	.order_address p .addres_left{
		float: left;
	}
	.order_address p .address_right{
		float: right;
		color: #333333;
	}
	.get_address{
		padding: 0;
		line-height: 32px;
		display: -webkit-box;
		word-break: break-all;
		-webkit-line-clamp: 2;
		/*! autoprefixer: off */
		-webkit-box-orient: vertical;
		/* autoprefixer: on */
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.line_lab{
		height: 20px;
		width: 100%;
		background: #eee;
	}
	.orderbody {
		width: auto;
		height: auto;
	/*	display: inline-block;*/
		padding: 30px;
		background: white;
		margin-bottom: 70px;
		/* float: left;*/
	}
	.orderbody .order_title{
		font-size: 30px;
		height: 100px;
		display: block;
		width: 100%;
		float:left;
		line-height: 100px;
		border-bottom: 1px solid #eeeeee;
	}
	.orderbody li{
		padding: 20px 0;
		width: 100%;
		float: left;
		/* display: inline-block;*/
		border-bottom: 1px solid #eeeeee;
	}
	.goods_left{
		width: 150px;
		height: 150px;
		border-radius: 10px;
		float: left;
	}
	.goods_left img{
		float: left;
		width: 100%;
		height: 100%;
		border-radius: 10px;
	}
	.orderbody .goods_modile{
		margin-left: 20px;
		float: left;
		width: 75%;
	}
	.orderbody .goods_modile p{
		float: left;
		width: 100%;
	}
	.goods_modile .goods_name{
		float: left;
		width: 295px;
		font-size: 24px;
		line-height: 30px;
		display: -webkit-box;
		word-break: break-all;
		-webkit-line-clamp: 2;
		/*! autoprefixer: off */
		-webkit-box-orient: vertical;
		/* autoprefixer: on */
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.goods_modile .goods_type{
		font-size: 22px;
		color: #999999;
	}
	.goods_modile .goods_price{
		float: right;
	}
	.goods_modile .goods_num{
		margin-top: 29px;
	}
	.show_all{
		width: 240px;
		height: 60px;
		display: inline-block;
		font-size: 26px;
		color: #666666;
		margin: 5% 0 0 32%;
		border-radius: 26px;
		text-align: center;
		line-height: 60px;
		background: #F5F5F5;
		position: relative;
		margin-bottom: 30px;
	}
	.show_all img{
		float: right;
		width: 14px;
		height: 8px;
		top: 43%;
		right: 12%;
		position: absolute;
	}
	.order_count{
		/*  float: left;*/
		width: 100%;
		height: auto;
		display: inline-block;
	}
	.delivery{
		width: 100%;
		height: 100px;
		/*  float: left;*/
		display: inline-block;
		line-height: 100px;
	}
	.delivery_title{
		float: left;
	}
	.delivery_way{
		float: right;
	}
	.order_total{
		height: 270px;
		clear: both;
		border-top: 1px solid #eeeeee;
	}
	.order_total p{
		line-height: 90px;
		font-size: 28px;
	}
	.order_total p span:nth-child(2){
		float: right;
	}
	.paymoney{
		border-top: 1px solid #eeeeee;
	}
	.paymoney span:nth-child(2){
		color: #E43C36;
		font-weight: bold;
	}
	.tip{
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		width: 100%;
		z-index: 111;
		font-size: 28px;
		color: rgba(255,105,0,1);
		padding: 20px 0;
		line-height: 50px;
		background: rgba(255,243,227,1);
		box-shadow: 0px -2px 10px 0px rgba(51,51,51,0.1);
	}
	.tip .txt{
		float: left;
		padding-left:30px;
	}
	.tip .txt span{
		padding-right: 10px;
		margin-top: -5px;
	}
	.tip button{
		float: right;
		font-size: 28px;
		margin-right:30px;
		height:48px;
		line-height:48px;
		border:1px solid rgba(255,105,0,1);
		border-radius:25px;
		background: none;
		color: #ff6900;
		white-space: nowrap;
	}
	.pop_tip{
		padding:30px 0 0;
		width:100%;
		height:100%;
		overflow: hidden;
		background: white;
	}
	.pop_tip h3{
		padding:0 40px 20px;
		line-height:60px;
		font-size:32px;
	}
	.pop_tip .txt{
		padding:0 40px 20px;
		line-height:44px;
		font-size:28px;
		color: #666;
		text-align: left;
	}
	.pop_tip .btn{
		display: flex;
		border-top:1px solid #ddd;
	}
	.pop_tip .btn .child{
		font-size:28px;
		flex:1;
		background: none;
		border: none;
		line-height: 90px;
	}
	.pop_tip .btn .child{
		border-left:1px solid #ddd;
	}
	.pop_tip .btn .child:nth-child(1){
		margin-left: 0;
	}
	.pop_tip .btn .no{
		color: #ff6900;
	}
</style>
